<script>
import *as XLSX from 'xlsx'
export default {
    data() {
        return {
            proList:[],
            currentPage:1
        }
    },
    computed:{
        tableData(){
            return this.proList.slice((this.currentPage-1)*5, (this.currentPage-1)*5+5)
        }
    },
    methods: {
        changeExcel(e){
            //选择文件的方法
            //找到用户选中的文件
            // console.dir(e.target.files);
            //1、找到用户选择的文件
            const file=event.target.files[0]
            //2、创建一个文件的加载器
            const reader =new FileReader()
            //3、将文件读取成数据流
            reader.readAsArrayBuffer(file)

            reader.onload=()=>{
                //4、将数据流转换成js对象
                const box =XLSX.read(reader.result, {type:'buffer'})
                // console.log(reader.result);
                console.log(box);


                //5、将工作表1内容读取出来
                let res=box.Sheets['商品列表']
                console.log(res);
                
                //6、将工作表1中内容转换为js数据
                res=XLSX.utils.sheet_to_json(res)

                //7、将数据渲染到页面中
                console.log(res);
                this.proList=res
            }


        }
    },
}
</script>p

<template>
    <h4>
        文件导入
        <el-button @click="$refs.excelRef.click()">选择文件</el-button> 
        <input @change="changeExcel" ref="excelRef" type="file" hidden>   
    </h4>
    
    <el-table :data="tableData">
    <el-table-column width="100" type="index" label="序号" >
        <template #default={$index}>
            <el-tag> 
               {{(currentPage-1)*5+1+ $index }} 
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="img" label="图片">
        <template #default={row}>
            <el-image :style="{width:'80px',height:'80px'}" :src="row.img1"> 
            </el-image>
        </template>
    </el-table-column>
    <el-table-column width="280" prop="proname" label="商品名称"></el-table-column>
    <el-table-column prop="category" label="商品分类"></el-table-column>
    <el-table-column prop="originprice" label="商品价格"></el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐">
        <template #default={row}>
            <el-switch
            v-model="row.isrecommend" :active-value="1" :inactive-value="0" 
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination  :page-size="5" v-model:current-page="currentPage" background layout="prev, pager, next" :total="proList.length"  />
</template>